---
title: "Flex Wrap"
description: "Utilities for controlling how flex items wrap."
# description: "控制 flex 项目如何换行的功能类"
features:
  responsive: true
  customizable: false
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/flexWrap'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

<!-- ## Don't wrap -->
## 不换行

<!-- Use `flex-nowrap` to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary: -->
使用 `flex-nowrap` 来阻止 flex 项目换行，导致非弹性的项目在必要时溢出容器。

```html emerald
<template preview>
  <div class="flex flex-nowrap space-x-4">
    <div class="h-12 w-2/5 rounded-md text-white flex-none bg-emerald-500 flex items-center justify-center text-2xl font-semibold ">1</div>
    <div class="h-12 w-2/5 rounded-md text-white flex-none bg-emerald-500 flex items-center justify-center text-2xl font-semibold ">2</div>
    <div class="h-12 w-2/5 rounded-md text-white flex-none bg-emerald-500 flex items-center justify-center text-2xl font-semibold ">3</div>
  </div>
</template>

<div class="flex **flex-nowrap**">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```

<!-- ## Wrap normally -->
## 常规换行

<!-- Use `flex-wrap` to allow flex items to wrap: -->
使用 `flex-wrap` 允许 flex 项目换行：

```html lightBlue
<template preview>
  <div class="flex flex-wrap -m-2">
    <div class="h-12 m-2 w-2/5 rounded-md text-white bg-light-blue-500 flex items-center justify-center text-2xl font-semibold ">1</div>
    <div class="h-12 m-2 w-2/5 rounded-md text-white bg-light-blue-500 flex items-center justify-center text-2xl font-semibold ">2</div>
    <div class="h-12 m-2 w-2/5 rounded-md text-white bg-light-blue-500 flex items-center justify-center text-2xl font-semibold ">3</div>
  </div>
</template>

<div class="flex **flex-wrap**">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```

<!-- ## Wrap reversed -->
## 反向换行

<!-- Use `flex-wrap-reverse` to wrap flex items in the reverse direction: -->
使用 `flex-wrap-reverse` 允许 flex 项目以相反的方向换行：

```html purple
<template preview>
  <div class="flex flex-wrap-reverse -m-2">
    <div class="h-12 m-2 w-2/5 rounded-md text-white bg-purple-500 flex items-center justify-center text-2xl font-semibold ">1</div>
    <div class="h-12 m-2 w-2/5 rounded-md text-white bg-purple-500 flex items-center justify-center text-2xl font-semibold ">2</div>
    <div class="h-12 m-2 w-2/5 rounded-md text-white bg-purple-500 flex items-center justify-center text-2xl font-semibold ">3</div>
  </div>
</template>

<div class="flex **flex-wrap-reverse**">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```

<!-- ## Responsive -->
## 响应式

<!-- To control how flex items wrap at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:flex-wrap-reverse` to apply the `flex-wrap-reverse` utility at only medium screen sizes and above. -->
要控制 flex 项在特定断点处的换行方式，请在任何现有的功能类前添加 `{screen}:` 前缀。例如，使用`md:flex-wrap-reverse` 仅在中等尺寸及以上的屏幕上应用 `flex-wrap-reverse` 功能类。

```html
<div class="flex flex-wrap **md:flex-wrap-reverse** ...">
  <!-- ... -->
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

## 定制

### 变体

<Variants plugin="flexWrap" name="flex-wrap" />

### 禁用

<Disabling plugin="flexWrap" name="flex-wrap" />
